<template>
  <div class="selectPop">
    <div class="top">
        <template v-for="(item,iIndex) in options.spec_list" >
          <div  v-if="item.id == selectId" style="display: flex;" >
            <nut-image
            class="goodsImg"
            :src="commonStore.img_domain + item.image" 
            @click="showFn(commonStore.img_domain + item.image)"
            >
              <template #error>
                <nut-image
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                  fit="contain"
                />
              </template>
            </nut-image>
            <div class="topCenter">
              <div class="prices acenter">
              <p class="newPrice"><span>¥</span>{{ item.format_price }}</p>
              <p class="oldPrice">{{ item.line_price }} <div class="line"></div> </p>
           </div>
           <p class="stock">库存{{ item.stock == -1 ? '无限' : item.stock }}</p></div>
          </div>
          
        </template>
       
   
      <div class="topRight">
        <nut-image
          :src="getAssetsFile('home/closeIcon.png')"
          @click="closeDialog"
        ></nut-image>
      </div>
    </div>
    <div class="center">
      <template v-for="(father, index) in options.spec_group_list" :key="index">   
        <div class="options">
          <p>{{ father.name }}</p>
          <div class="selectSpecs">
            <div class="selectOption" v-for="(child,location) in father.specs"
            @click="choseSpec(child,father,index)"
            :class="{ isChose: child.isChose }"
          >
            {{ child.spec_value }}
          </div>
          </div>
         
        </div>
      </template>

      <div class="count jscenter">
        <p>数量</p>
        <div class="jscenter">
          <nut-image
            :src="getAssetsFile('productCard/reduce.png')"
            @click="reduceCount"
          ></nut-image>
          <p class="totalCount">{{ options.myCount }}</p>
          <nut-image
            :src="getAssetsFile('productCard/plus.png')"
            @click="plusCount"
          ></nut-image>
        </div>
      </div>
    </div>
    <div class="desc">
      <p>商品描述</p>
      <!-- <goodsInfo :options="options.description"></goodsInfo> -->
      <p>{{ options.description }}</p>
      <div class="imgs">
        <nut-image class="imgsItem"
        v-for="(bImage, index) in options.image_list"
        :src="commonStore.img_domain + bImage"
        @click="showFn(commonStore.img_domain + bImage)"
      >
      <!-- <template #error>
              <nut-image class="errorImg"
                  src="https://google-quanjing-game.oss-cn-hangzhou.aliyuncs.com/chenxing/error.png"
                  fit="contain"
                />
              </template> -->
    </nut-image>
      </div>
    </div>
    <div class="bottomBtn">
      <fullFoot @clickBtn="addToCar" :title="'添加到购物车'"></fullFoot>
    </div>

    <my-image-preview ref="myImagePreviewRef"></my-image-preview>
  </div>
</template>

<script setup lang="ts">
import { getAssetsFile } from "@/utils/pub-use";
import { ref } from "vue";
import fullFoot from "../components/fullFoot.vue";
import useCommonStore from "@/store/common";
import { FSWatcher } from "fs";
import { Toast } from "@nutui/nutui";
import myImagePreview from "@/components/imagePreview/index.vue";

const myImagePreviewRef = ref<InstanceType<typeof myImagePreview>>();

const showFn = (url: string) => {
  myImagePreviewRef.value?.showFn(url);
};

const commonStore = useCommonStore();
const emits = defineEmits(["close", "reduce", "plus", "size", "type", "add"]);
const props = defineProps<{ options: any }>();
const closeDialog = () => {
  emits("close");
};
const reduceCount = () => {
  emits("reduce");
};
const plusCount = () => {
  emits("plus");
};
let selectId:any = ref()
let newArray:any = []
const setNewArray = ()=>{
  let newString =''
  props.options.spec_group_list.map((fitem:any,index:number)=>{
    fitem.specs.map((child:any,index:number)=>{
            if(index == 0){
              newArray.push(child.spec_id)  
              child.isChose = true
            }else{
              child.isChose = false
            }
        })
  }) 
  newArray.sort((a: any, b: any) => a * 1 - b * 1).map((item:any,index:number)=>{
        newString = newString + ','+String(item)
      })
      newString =  newString.slice(1)
      props.options.spec_list.map((father:any) =>{
        if(father.spec_combination_id == newString){
          selectId.value =father.id
        }
      })
}
setNewArray()

const choseSpec = ((child:any,father:any,index:number)=>{
  father.specs.map((fitem:any)=>{
    fitem.isChose =false
  })
  child.isChose =true
  getSpec(index)
})




const getSpec = (index:number)=>{
  
  let newString =''
  console.log(props.options.spec_group_list[index],'props.options.spec_group_list[index]');
  
  props.options.spec_group_list[index].specs.map((child:any,locaiton:number)=>{
    if(child.isChose){
       newArray[index] = child.spec_id
    }
  })

  
 
newArray.sort((a: any, b: any) => a * 1 - b * 1).map((item:any,index:number)=>{
        newString = newString + ','+String(item)
      })
      newString =  newString.slice(1)
      props.options.spec_list.map((father:any) =>{
        if(father.spec_combination_id == newString){
          selectId.value =father.id
        }
      })
}


const addToCar = () => {
  // console.log(props.options);
  let spec_combination_id:any = []
  props.options.spec_group_list.map((father:any,index:number)=>{
      father.specs.map((child:any,location:number)=>{
       if(child.isChose){
        spec_combination_id.push(child.spec_id)
       }
      })
    })
    let payload ={
    goods_id:props.options.id,
    quantity:props.options.myCount,
    spec_combination_id:spec_combination_id.join(',')
    }
  emits("add",payload,props.options);
 
};

</script>

<style lang="scss" scoped>
.selectPop {
  padding: 38px 30px;
  padding-bottom: 142px;
  .top {
    display: flex;
    position: relative;
    .goodsImg{
      width: 132px;
        height: 132px;
        border-radius: 16px;
      margin-right: 30px;
    }
    .topCenter {
      display: flex;
      flex-direction: column;
      justify-content: center;
     
      .prices {
        .newPrice {
          color: #f55726;
          font-size: 40px;
          font-weight: 500;
          span {
            font-size: 28px;
          }
        }
        .oldPrice {
          margin-left: 16px;
          font-size: 24px;
          color: #999999;
          position: relative;
          .line {
            width: 100%;
            height: 3px;
            background-color: #999;
            position: absolute;
            top: 15px;
          }
        }
      }
      .stock {
        margin-top: 15px;
        font-size: 24px;
        color: #999999;
      }
    }
    .topRight {
      position: absolute;
      top: 8px;
      right: 14px;
      .nut-image {
        margin: 0;
        :deep(img) {
          width: 26px;
          height: 26px;
        }
      }
    }
  }
  .center {
    margin-top: 18px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 25px;
    p {
      margin-bottom: 17px;
      font-weight: 500;
      color: #000000;
      font-size: 28px;
    }
    .options {
     
     
      margin-bottom: 17px;
      .selectSpecs{
        display: flex;
      flex-wrap: wrap;
      }
      .selectOption {
        padding: 9px 24px;
        background: #f8f9fa;
        border-radius: 27px;
        font-size: 26px;
        color: #000000;
        word-break: keep-all;
        margin-bottom: 17px;
        margin-right: 10px;
      }
      .isChose {
        background: #f9fffa;
        color: #40ae36;
      }
      .selectOption:last-child {
        margin-right: 0;
      }
    }
    .count {
      p {
        font-weight: 500;
        color: #000000;
        font-size: 28px;
        margin: 0;
      }
      .nut-image {
        :deep(img) {
          width: 44px;
          height: 44px;
        }
      }
      .totalCount {
        margin: 0;
        width: 78px;
        text-align: center;
      }
    }
  }
  .desc {
    margin-top: 29px;

    p {
      font-size: 28px;
      font-weight: 500;
      color: #000000;
      margin-bottom: 26px;
    }
    .imgsItem{
      width: 100%;
      margin-top: 20px;
      // min-height: 650px;
    }
  }
}
</style>
